﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>消息中心</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/lobsteruiframe/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/lobsteruiframe/layuiadmin/style/admin.css" rel="stylesheet" />
    <script src="/lobsteruiframe/layuiadmin/layui/layui.js"></script>
    <script src="/jslib/jquery-3.4.1.min.js"></script>
    <script src="/jslib/lobster.js"></script>

    <style>
    </style>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card" style="padding:0px;">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-input-inline">
                    <label class="layui-form-label">选择应用：</label>
                    <div class="layui-input-block">
                        <select name="applicationId" id="applicationId" lay-filter="applicationId"></select>
                    </div>
                </div>
            </div>
            <div class="layui-card-body">
                <script type="text/html" id="barAllMessage">
                    <a class="layui-btn layui-btn-sm" lay-event="alldel-submit" id="alldel" lay-id=""><i class="layui-icon layui-icon-delete"></i>删除</a>
                    <a class="layui-btn layui-btn-sm" lay-event="allflagread-submit" id="allflagread" lay-id=""><i class="layui-icon layui-icon-ok"></i>标记已读</a>
                    <a class="layui-btn layui-btn-sm" lay-event="allread-submit" id="allread" lay-id=""><i class="layui-icon layui-icon-ok-circle"></i>全部已读</a>
                </script>
                <table class="layui-table" id="gridAllMessage" lay-filter="gridAllMessage"></table>
            </div>
            <script type="text/html" id="barRowRead">
                <a class="layui-btn layui-btn-xs" lay-event="read"><i class="layui-icon"></i>查看</a>
            </script>
            <script type="text/html" id="barRowStates">
                {{# if(d.IsRead==0){ }}
                <span style="color:red">{{d.States}}</span>
                {{# } else { }}
                <span>{{d.States}}</span>
                {{# } }}
            </script>
        </div>
    </div>
</body>
</html>

<script type="text/javascript">
    lobsterlayui.main(['index', 'layer', 'form', 'element'], {
        data: {
            $layui: null,
            right: null,
            headers: null,
            tablemsg: null
        },
        pageload: function (right) {
            this.data.right = right;
            this.data.headers = { "Authorization": "Bearer " + right.Token };

            this.loadAppSelect(() => {
                this.loadmessage();
            });
            this.initevent();
        },
        //初始化事件
        initevent: function () {
            var self = this;
            var layer = this.data.$layui.layer;
            var form = this.data.$layui.form;
            var element = this.data.$layui.element;
            var table = this.data.$layui.table;

            //监听应用下拉框
            form.on('select(applicationId)', function (data) {
                self.loadmessage();
            });

            //查看消息
            table.on("tool(gridAllMessage)", function (obj) {
                var data = obj.data;
                if (obj.event == "read") {
                    var index = layer.open({
                        type: 1,
                        title: "查看消息",
                        btn: ["关闭"],
                        btnAlign: "r",
                        content: $('#dialog_lookmsg').html(),
                        area: ["700px", "80%"],
                        maxmin: true,
                        success: function (layero, index) {

                            $('#txtMessageTitle').val(data.MessageTitle);
                            $('#txtSendEmpName').val(data.SendUserName);
                            $('#txtReceiveTime').val(data.ReceiveTime);
                            $('#txtMessageContent').html(data.MessageContent);

                            self.setmessageread(data.Id);
                        },
                        yes: function (index, layero) {

                            layer.close(index); //关闭弹层
                        },
                        cancel: function () {

                        }
                    });
                }

            });

            //消息工具栏
            table.on("toolbar(gridAllMessage)", function (obj) {
                if (obj.event != "allread-submit") {
                    var msgs = [];
                    layui.each(table.checkStatus(obj.config.id).data, function (id, msg) {
                        msgs.push(msg.Id);
                    });
                    if (msgs.length == 0) {
                        layer.alert("请选择数据", { icon: 3, title: "提示" });
                        return;
                    }
                    var msgids = msgs.join(",");
                }

                if (obj.event == "alldel-submit") {
                    layer.confirm("确认删除么?", { icon: 3, title: "提示" },
                        function (index) {
                            self.setmessageread(msgids);
                        });
                    return false;
                }
                else if (obj.event == "allflagread-submit") {
                    self.setmessageread(msgids);
                    return false;
                }
                else if (obj.event == "allread-submit") {
                    layer.confirm("确认全部已读么?", { icon: 3, title: "提示" },
                        function (index) {
                            self.setallmessageread();
                        });
                    return false;
                }
            });
        },

        //初始化应用下拉选择框
        loadAppSelect: function (callback) {

            var form = this.data.$layui.form;

            lobsterlayui.GET("/admin/v1/usersetup/GetWorkerAppData").then(data => {
                var appdata = data.appdata;
                $("#applicationId").html("");
                for (var i = 0; i < appdata.length; i++) {
                    $("#applicationId").append("<option value=\"" + appdata[i].AppId + "\">" + appdata[i].AppName + "</option>")
                }
                form.render('select');


                if (callback) {
                    callback();
                }
            });
        },
        // 显示消息
        loadmessage: function () {
            var self = this;
            var table = this.data.$layui.table;

            self.data.tablemsg = table.render({
                elem: "#gridAllMessage",
                where: {
                    appid: $("#applicationId").find("option:selected").val()
                },
                height: "full-140",
                cellMinWidth: 80, //全局定义常规单元格的最小宽度
                toolbar: "#barAllMessage",
                url: "/admin/v1/usersetup/GetUserMessages", //数据接口
                headers: self.data.headers,
                page: true, //开启分页
                //size: "sm",
                //even: true,
                loading: true,
                cols: [[ //表头
                    { type: "checkbox" },
                    { field: "MessageTypeName", width: "14%", title: "消息类型" },
                    { field: "MessageTitle", title: "消息标题" },
                    { field: "ReceiveTime", width: "21%", title: "时间" },
                    { field: "States", width: "10%", title: "已读标识", templet: "#barRowStates" },
                    { field: "SendEmpName", width: "10%", title: "发送人" },
                    { title: "操作", width: "8%", toolbar: "#barRowRead" }
                ]],
                parseData: function (res) {
                    return {
                        code: res.code,
                        msg: res.msg,
                        count: res.data.count,
                        data: res.data.dt
                    }
                }
            });
        },
        //标记消息为已读
        setmessageread: function (msgids) {
            var self = this;
            var layer = this.data.$layui.layer;

            lobsterlayui.GET("/admin/v1/usersetup/SetUserMessageRead", { ids: msgids }).then(data => {
                //加载消息
                self.loadmessage();

                layer.closeAll();
            });

        },
        //标记所有消息为已读
        setallmessageread: function () {
            var self = this;
            var layer = this.data.$layui.layer;

            lobsterlayui.GET("/admin/v1/usersetup/SetUserMessageReadAll", { appId: $("#applicationId").val() }).then(data => {
                //加载消息
                self.loadmessage();
                layer.closeAll();
            });
        }
    });


</script>


<script type="text/html" id="dialog_lookmsg">
    <div class="layui-fluid box">
        <form class="layui-form" lay-filter="formMsg" id="formMsg" style="padding: 20px 30px 0 0;">
            <div class="layui-card">
                <div class="layui-card-header" style="height:150px;">
                    <div class="layui-form-item">
                        <div class="layui-form-label">消息标题：</div>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" disabled id="txtMessageTitle" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-form-label">发送人：</div>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" disabled id="txtSendEmpName" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-form-label">发送时间：</div>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" disabled id="txtReceiveTime" />
                        </div>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <div class="layui-form-label">消息内容：</div>
                        <div class="layui-input-block">
                            <div class="layadmin-text" id="txtMessageContent" style="padding-top:7px;"></div>
                        </div>
                    </div>
                </div>
            </div>

        </form>
    </div>
</script>